/**************************************
 *
 * VLOOK CSS - Mermaid 自定义样式
 * (配合 base.less 进行使用)
 *
 * V15.1
 * 2022-06-25
 * powered by MAX°孟兆
 *
 * QQ Group: 805502564
 * email: maxchow@qq.com
 *
 * https://github.com/MadMaxChow/VLOOK
 * https://gitee.com/madmaxchow/VLOOK
 *
 *************************************/

// @blankCursor: "";

:root {
    // #Mermaid_Var
    --mm-sequence-numbers: on;
    --mm-flowchart-curve: basis;

    --mm-font-family: var(--v-f-fm-tag) !important;
    --mm-alt-font-family: var(--v-f-fm-tag) !important;

    --mm-c-red-lg: @mmColorRed;
    --mm-c-red-alt-lg: @mmColorRedAlt;
    --mm-c-orange-lg: @mmColorOrange;
    --mm-c-orange-alt-lg: @mmColorOrangeAlt;
    --mm-c-yellow-lg: @mmColorYellow;
    --mm-c-yellow-alt-lg: @mmColorYellowAlt;
    --mm-c-green-lg: @mmColorGreen;
    --mm-c-green-alt-lg: @mmColorGreenAlt;
    --mm-c-cyan-lg: @mmColorCyan;
    --mm-c-cyan-alt-lg: @mmColorCyanAlt;
    --mm-c-blue-lg: @mmColorBlue;
    --mm-c-blue-alt-lg: @mmColorBlueAlt;
    --mm-c-purple-lg: @mmColorPurple;
    --mm-c-purple-alt-lg: @mmColorPurpleAlt;
    --mm-c-pink-lg: @mmColorPink;
    --mm-c-pink-alt-lg: @mmColorPinkAlt;
    --mm-c-brown-lg: @mmColorBrown;
    --mm-c-brown-alt-lg: @mmColorBrownAlt;
    --mm-c-gray-lg: @mmColorGray;
    --mm-c-gray-alt-lg: @mmColorGrayAlt;

    --mm-c-red-dk: @mmColorRedAlt;
    --mm-c-red-alt-dk: @mmColorRed;
    --mm-c-orange-dk: @mmColorOrangeAlt;
    --mm-c-orange-alt-dk: @mmColorOrange;
    --mm-c-yellow-dk: @mmColorYellowAlt;
    --mm-c-yellow-alt-dk: @mmColorYellow;
    --mm-c-green-dk: @mmColorGreenAlt;
    --mm-c-green-alt-dk: @mmColorGreen;
    --mm-c-cyan-dk: @mmColorCyanAlt;
    --mm-c-cyan-alt-dk: @mmColorCyan;
    --mm-c-blue-dk: @mmColorBlueAlt;
    --mm-c-blue-alt-dk: @mmColorBlue;
    --mm-c-purple-dk: @mmColorPurpleAlt;
    --mm-c-purple-alt-dk: @mmColorPurple;
    --mm-c-pink-dk: @mmColorPinkAlt;
    --mm-c-pink-alt-dk: @mmColorPink;
    --mm-c-brown-dk: @mmColorBrownAlt;
    --mm-c-brown-alt-dk: @mmColorBrown;
    --mm-c-gray-dk: @mmColorGrayAlt;
    --mm-c-gray-alt-dk: @mmColorGray;

    --mm-c-red: var(--mm-c-red-lg);
    --mm-c-red-alt: var(--mm-c-red-alt-lg);
    --mm-c-orange: var(--mm-c-orange-lg);
    --mm-c-orange-alt: var(--mm-c-orange-alt-lg);
    --mm-c-yellow: var(--mm-c-yellow-lg);
    --mm-c-yellow-alt: var(--mm-c-yellow-alt-lg);
    --mm-c-green: var(--mm-c-green-lg);
    --mm-c-green-alt: var(--mm-c-green-alt-lg);
    --mm-c-cyan: var(--mm-c-cyan-lg);
    --mm-c-cyan-alt: var(--mm-c-cyan-alt-lg);
    --mm-c-blue: var(--mm-c-blue-lg);
    --mm-c-blue-alt: var(--mm-c-blue-alt-lg);
    --mm-c-purple: var(--mm-c-purple-lg);
    --mm-c-purple-alt: var(--mm-c-purple-alt-lg);
    --mm-c-pink: var(--mm-c-pink-lg);
    --mm-c-pink-alt: var(--mm-c-pink-alt-lg);
    --mm-c-brown: var(--mm-c-brown-lg);
    --mm-c-brown-alt: var(--mm-c-brown-alt-lg);
    --mm-c-gray: var(--mm-c-gray-lg);
    --mm-c-gray-alt: var(--mm-c-gray-alt-lg);
}

// ** 注意 **
// 更改些段与字体相关的样式时，须同步修改切换字体样式的 JS 代码

/* ----- pie diagram 饼图 ----- */

// 标题、图例文本
.pieTitleText {
    fill: var(--d-f-c) !important;
    font-family: var(--v-f-fm-tag) !important;
    font-weight: var(--v-f-w-title) !important;
    font-size: 1.5em !important;
}
.legend text {
    fill: var(--d-f-c) !important;
    font-family: var(--v-f-fm-tag) !important;
    font-weight: var(--v-f-w-title) !important;
}

.slice {
    font-family: var(--v-f-fm-tag) !important;
    font-weight: var(--v-f-w-title) !important;
}

/* ----- flow diagram 流程图 ----- */

.node .label,
.actor > tspan,
.edgePaths {
    pointer-events: none;
}
// .md-diagram-panel .label div,
.label {
    // font-size: 1em !important;
    font-size: 0.875em !important;
    fill: var(--d-f-c) !important;
    color: var(--d-f-c) !important;
}

// #write svg[id^="mermaidChart"] {
.md-diagram-panel {
    color: var(--d-f-c) !important;
    line-height: 1 !important;
    padding-bottom: 8px; // 针对 Mermaid 图表，不添加会导致出现滚动条
}

// 矩形（方角/圆角/圆形/菱形/旗形/多边形/不规则形状）
.label div,
.label span {
    color: var(--d-f-c) !important;
    font-family: var(--v-f-fm-tag) !important;
    font-weight: normal !important;
}

// 圆形
.node circle,
// 多边形（菱形、梯形、平行四边形等）
.node polygon,
// 路径图形（数据库等）
.node path,
// 方角矩形
.node rect[rx="0"][ry="0"],
// 圆角矩形
.node rect[rx="5"][ry="5"] {
    fill: var(--pn-c) !important;
    stroke: var(--d-f-c) !important;
    stroke-width: 2 !important;
}
// 开始 / 结束、药丸形
.node rect[rx="20"][ry="20"], // keyword: graph
.node rect[rx="18"][ry="18"] { // keyword: flowchart
    fill: var(--d-f-c-alt) !important;
    stroke: var(--d-f-c) !important;
    stroke-width: 0 !important;
}
// 开始 / 结束、药丸形的文本
.node rect[rx="20"][ry="20"] + .label div, // keyword: graph
.node rect[rx="18"][ry="18"] + .label div { // keyword: flowchart
    font-weight: var(--v-f-w-title) !important;
    color: var(--d-bc) !important;
}

// 自定义：同页
.node[id^="flowchart-inpage"] circle,
// 自定义：离页、旗形、多边形、不规则形状
.node[id^="flowchart-outpage"] polygon {
    stroke: var(--d-f-c-alt) !important;
    stroke-width: 1 !important;
    stroke-dasharray: 8 1 !important;
}
.node[id^="flowchart-inpage"] circle + .label div,
.node[id^="flowchart-outpage"] polygon + .label div {
    color: var(--d-f-c-alt) !important;
}

// 自定义：汇聚样式的多边形（菱形、梯形、平行四边形等）
.node[id^="flowchart-join"] rect[rx][ry],
.node[id^="flowchart-join"] polygon,
// 自定义：汇聚样式的圆形
.node[id^="flowchart-join"] circle {
    fill: var(--d-f-c) !important;
    opacity: 0.6 !important;
    stroke-width: 0 !important;
}
.node[id^="flowchart-join"] rect[rx][ry] {
    x: -50px !important;
    y: -4px !important;
    width: 100px !important;
    height: 8px !important;
}
.node[id^="flowchart-joinv"] rect[rx][ry] {
    x: -4px !important;
    y: -50px !important;
    width: 8px !important;
    height: 100px !important;
}

// 鼠标在图元上悬停
.node[id^="flowchart-END"]:hover rect[rx="20"][ry="20"],
.node[id^="flowchart-END"]:hover rect[rx="18"][ry="18"],
.node[id^="flowchart-FINAL"]:hover circle,
.node:hover rect,
.node:hover rect[rx][ry],
.node:hover rect[rx="0"][ry="0"],
.node:hover rect[rx="5"][ry="5"],
.node[id^=flowchart-inpage]:hover circle,
.node:hover polygon,
.node:hover path {
    fill: var(--ac-theme1-alt) !important;
    stroke: @aColor !important;
    cursor: crosshair;
}
// 针对特定图元
.node[id^="flowchart-START"]:hover rect[rx="20"][ry="20"],
.node[id^="flowchart-START"]:hover rect[rx="18"][ry="18"],
.node[id^="flowchart-INIT"]:hover circle,
.node[id^="flowchart-join"]:hover rect[rx][ry],
.node[id^="flowchart-join"]:hover circle,
.node[id^="flowchart-join"]:hover polygon,
.node:hover rect[rx="20"][ry="20"],
.node:hover rect[rx="18"][ry="18"] {
    fill: @aColor !important;
    cursor: crosshair;
}

// 鼠标在图元文本上悬停
.node:hover .label div, // keyword: graph
.node:hover .label span { // keyword: flowchart
    color: @aColor !important;
    // font-weight: var(--v-f-w-title) !important;
}

// 实条
.edgePath .path, // keyword: graph
.flowchart-link { // keyword: flowchart
    stroke: var(--d-f-c) !important;
}
// 虚线
.edgePath .path[style*="stroke-dasharray"] {
    stroke-width: 1.5 !important;;
}
.edgePath .path[style*="stroke-width: 3"] {
    stroke-width: 3 !important;
}

// 线条箭头
.arrowheadPath, // keyword: graph
.marker.flowchart { // keyword: flowchart
    fill: var(--d-f-c) !important;
}

// 线条文本
span.edgeLabel {
// .edgeLabel .label span {
    color: var(--d-f-c) !important;
    fill: var(--d-bc) !important;
    line-height: 1em !important;
    background-color: transparent !important;
    // background-color: var(--d-bc) !important;
}
// .edgeLabel .label span {
//     background-color: transparent !important;
// }
g.root span.edgeLabel { // keyword: flowchart
    // background-color: var(--d-bc) !important;
    background: linear-gradient(0deg, var(--d-bc), transparent);
}
.edgeLabel:hover .label span {
    color: @aColor !important;
    // font-weight: var(--v-f-w-title) !important;
    cursor: crosshair;
}

// 线条文本背景
.edgeLabel div,
.edgeLabel .label rect {
    fill: var(--d-bc) !important;
}

// 子图
.cluster rect {
    fill: var(--d-bc) !important;
    stroke: var(--d-f-c-alt) !important;
    stroke-width: 1 !important;
    stroke-dasharray: 6 6 !important;
}

// 子图文本
.cluster > .label div, // keyword: graph
.cluster-label div > span { // keyword: flowchart
    color: var(--d-f-c-alt) !important;
    margin-left: 0 !important;
    font-style: italic;
    font-weight: var(--v-f-w-title) !important;
    font-family: var(--v-f-fm-tag) !important;
}
.cluster-label div > span { // keyword: flowchart
    font-size: 0.875em !important;
}
.cluster-label div > span {
    // font-size: 0.75em !important;
    padding-right: 0.5em !important;
}

.cluster:hover rect {
    fill: var(--ac-theme1-alt) !important;
    stroke: @aColor !important;
    cursor: crosshair;
}
.cluster:hover > .label div {
    font-weight: var(--v-f-w-title) !important;
    cursor: crosshair;
}

// 自定义：流程图「开始」样式
.node[id^="flowchart-START"] rect,
.node[id^="flowchart-START"] rect[rx="20"][ry="20"],
.node[id^="flowchart-START"] rect[rx="18"][ry="18"] {
    fill: var(--d-f-c) !important;
    stroke: var(--d-f-c) !important;
    stroke-width: 0 !important;
}

.node[id^="flowchart-START"] rect + .label div, // keyword: graph
.node[id^="flowchart-START"] rect + .label span { // keyword: flowchart
    color: var(--d-bc) !important;
    font-weight: var(--v-f-w-title) !important;
}

// 自定义：流程图「结束」节点样式
.node[id^="flowchart-END"] rect,
.node[id^="flowchart-END"] rect[rx="20"][ry="20"],
.node[id^="flowchart-END"] rect[rx="18"][ry="18"] {
    fill: var(--d-bc) !important;
    stroke: var(--d-f-c) !important;
    stroke-width: 4 !important;
}

.node[id^="flowchart-END"] rect[rx="20"][ry="20"] + .label div,
.node[id^="flowchart-END"] rect[rx="18"][ry="18"] + .label div {
    font-weight: var(--v-f-w-title) !important;
    color: var(--d-f-c) !important;
}

// 自定义：状态机图「初始」状态样式
.node[id^="flowchart-INIT"] circle {
    fill: var(--d-f-c) !important;
    stroke-width: 0 !important;
}

// 自定义：状态机图「最终」状态节点样式
.node[id^="flowchart-FINAL"] circle {
    fill: none !important;
    stroke: var(--d-f-c) !important;
    stroke-width: 4 !important;
}
.node[id^="flowchart-FINAL"] circle + .label div {
    color: var(--d-f-c) !important;
}

/* ----- sequeuce diagram 顺序图 / 时序图 ----- */

// 角色
.actor {
    stroke: var(--d-f-c-alt) !important;
    fill: var(--pn-c) !important;
    font-size: 1em !important;
    stroke-width: 1 !important;
}
g:hover > rect.actor,
g:hover > .actor-line,
g:hover > line[id^="actor"] { // 后续须跟踪 mermaid 是否已修复该 class="200" 的 bug
    fill: var(--ac-theme1-alt) !important;
    stroke: @aColor !important;
    cursor: crosshair;
}

// 人物角色
.v-actor-person {
    fill: var(--pn-c) !important;
    stroke: var(--d-f-c-alt) !important;
}

// 重要系统角色
.v-actor-key-sys {
    stroke-width: 4 !important;
    font-weight: var(--v-f-w-title) !important;
}

// 外部系统角色
.v-actor-ext-sys {
    stroke-dasharray: 6, 2 !important;
    font-style: italic !important;
}

// 角色文本
text.actor > tspan {
    fill: var(--d-f-c) !important;
    stroke: none !important;
    font-size: 0.875em !important;
    font-family: var(--v-f-fm-tag) !important;
    font-weight: var(--v-f-w-title);
}

// 角色生命线
.actor-line,
g > line[id^="actor"] { // 后续须跟踪 mermaid 是否已修复该 class="200" 的 bug
    stroke: var(--d-f-c-alt) !important;
    stroke-width: 1 !important;
}

// 实线消息
.messageLine0 {
    stroke-width: 2 !important;
    stroke: var(--d-f-c) !important;
}

// 虚线消息
.messageLine1 {
    stroke-width: 2 !important;
    stroke: var(--d-f-c) !important;
    stroke-dasharray: 6, 3 !important;
}

// 实线/虚线箭头
#arrowhead path,
[id^=arrowhead],
[id^=arrowhead] path {
    fill: var(--d-f-c) !important;
    stroke: none !important;
}

.messageText:hover,
.messageText:hover + .messageLine0 + .sequenceNumber,
.messageText:hover + .messageLine1 + .sequenceNumber {
    fill: @aColor !important;
    font-weight: var(--v-f-w-title) !important;
    cursor: crosshair;
}
.messageText:hover + .messageLine0,
.messageText:hover + .messageLine1 {
    stroke: @aColor !important;
}

// 消息序号
.sequenceNumber {
    color: var(--d-bc) !important;//var(--d-bc) !important;
    fill: var(--d-bc) !important;//var(--d-bc) !important;
    font-weight: var(--v-f-w-title) !important;
    font-size: 0.875em;
}

// 消息序号背景
#sequencenumber {
    fill: var(--d-f-c) !important;//var(--mm-c-blue) !important;
    stroke: var(--d-f-c) !important;//var(--d-bc) !important;
    stroke-width: 0 !important;
    transform: scale(0.5);
    transform-origin: 15px 15px;
}

// 异步消息箭头
#crosshead,
#crosshead path {
    fill: var(--d-f-c-alt) !important;
    stroke: var(--d-f-c) !important;
}

// 消息文本
.messageText {
    fill: var(--d-f-c) !important;
    stroke: none !important;
    font-size: 0.875em !important;
    font-family: var(--v-f-fm-tag) !important;
    font-weight: normal !important;
    line-height: 2em !important;
}

// 活动块
.activation0,
.activation1,
.activation2 {
    fill: var(--d-f-c-alt) !important;
    stroke-width: 0 !important;
}

// 片断的类型标签背景
.labelBox {
    stroke: none !important;
    fill: var(--mm-c-purple-lg) !important;
}

// 角标
// 片断的类型文本
.labelBox + .labelText {
    fill: var(--mm-c-purple-alt-lg) !important;
    font-size: 0.875em !important;
    font-family: var(--v-f-fm-tag) !important;
    font-weight: var(--v-f-w-title) !important;
}

// 片断的标题标签文本
.loopText, // alter else
.loopText > tspan {
    fill: var(--mm-c-purple-lg) !important;
    font-family: var(--v-f-fm-tag) !important;
    font-size: 0.875em;
    font-weight: var(--v-f-w-title) !important;
}
.loopText > tspan {
    font-size: 1em;
}
.loopText:hover, // alter else
.loopText > tspan:hover {
    fill: var(--ac-theme1)!important;
    cursor: crosshair;
}

// 片断的线框
.loopLine {
    stroke-width: 1 !important;
    // stroke-dasharray: 8, 8 !important;
    stroke-dasharray: none !important;
    stroke: var(--mm-c-purple-lg) !important;
}

// 备注背景
.note {
    stroke: var(--mm-c-yellow) !important;
    stroke-dasharray: 5 !important;
    fill: var(--mm-c-yellow-alt) !important;
}

// 备注文本
.noteText tspan {
    fill: var(--d-f-c) !important;
    stroke: none !important;
    font-size: 0.875em !important;
    font-family: var(--v-f-fm-text) !important;
}

/* ----- state diagram 状态机图 ----- */

g.stateGroup circle {
    fill: var(--d-f-c) !important;
    stroke: var(--d-bc) !important;
}
g.stateGroup rect,
g.stateGroup line {
    fill: var(--mm-c-purple-alt) !important;
    stroke: var(--mm-c-purple) !important;
}
g.stateGroup rect[height="7"] {
    fill: var(--d-f-c) !important;
    stroke: none !important;
}
.transition {
    stroke: var(--d-f-c) !important;
}
g.stateGroup .composit {
    fill: var(--d-bc) !important;
}
g.stateGroup .state-title,
g.stateGroup text {
    fill: var(--d-f-c) !important;
    font-family: var(--v-f-fm-tag) !important;
    font-weight: normal !important;
    font-size: 0.875em !important;
}

.stateLabel text {
    font-size: 0.615em !important;
}

g.state-note {
    fill: var(--mm-c-gray-alt);
    stroke: var(--mm-c-gray);
}

/* ----- class diagram 类图 ----- */

// 类背景
g.node > rect.outer {
    fill: var(--pn-c) !important;
    stroke: var(--d-f-c) !important;
    stroke-width: 2 !important;
}
g.node:hover {
    cursor: crosshair;
}
g.node:hover rect.outer,
g.node:hover rect.outer + line.divider {
    stroke: var(--ac-theme1) !important;
}
// g.node .label .nodeLabel:hover {
//     color: var(--ac-theme1) !important;
//     // fill: var(--ac-theme1) !important;
//     // font-weight: var(--v-f-w-title) !important;
// }

// 类属性、方法分隔线
g.node > line.divider {
    stroke: var(--d-f-c-alt) !important;
    stroke-width: 1;
}
g.node > rect.outer + line.divider {
    stroke: var(--d-f-c) !important;
    stroke-width: 2;
}

// // 类文本
// g.classGroup text {
//     font-family: var(--v-f-fm-tag) !important;
//     font-size: 10px !important;
//     fill: var(--d-f-c-alt) !important;
//     stroke: none !important;
// }
// // 类标题
// g.classGroup text .title {
//     font-weight: var(--v-f-w-title) !important;
//     fill: var(--d-f-c) !important;
// }
// // 类背景
// g.classGroup rect {
//     fill: var(--pn-c) !important;
//     stroke: var(--d-f-c) !important;
//     stroke-width: 2 !important;
// }
// g.classGroup:hover {
//     cursor: crosshair;
// }
// g.classGroup:hover rect {
//     stroke: var(--ac-theme1) !important;
// }
// g.classGroup text tspan:hover {
//     fill: var(--ac-theme1) !important;
//     font-weight: var(--v-f-w-title) !important;
// }
// // 类属性、方法分隔线
// g.classGroup line {
//     stroke: var(--d-f-c-alt) !important;
//     stroke-width: 1;
// }

// // 关系标签文本
// g.classLabel .label {
//     font-family: var(--v-f-fm-tag) !important;
//     fill: var(--d-f-c-alt) !important;
//     font-size: 9px !important;
//     font-style: italic;
// }
// // 关系集合文本
// g.cardinality text {
//     font-family: var(--v-f-fm-tag) !important;
//     fill: var(--ac-theme2) !important;
//     font-size: 14px !important;
//     font-weight: var(--v-f-w-title) !important;
// }
// g.classLabel .label:hover,
// g.cardinality text:hover {
//     fill: var(--ac-theme1) !important;
//     font-weight: var(--v-f-w-title) !important;
//     cursor: crosshair;
// }
// // 关系背景
// g.classLabel .box {
//     stroke: none !important;
//     stroke-width: 0 !important;
//     fill: var(--d-bc) !important;
//     opacity: 0 !important;
// }
// // 关系线条
// g.classGroup .relation,
// .relation {
//     stroke: var(--d-f-c) !important;
//     stroke-width: 1 !important;
//     fill: none !important;
// }
// g.classGroup .relation:hover,
// .relation:hover {
//     stroke: var(--ac-theme1) !important;
//     cursor: crosshair;
// }
// 关系箭头
#compositionStart path,
#compositionEnd path,
#dependencyStart path,
#dependencyEnd path,
#extensionStart path,
#extensionEnd path {
  fill: var(--d-f-c) !important;
  stroke:  var(--d-f-c) !important;
  stroke-width: 1 !important;
}
#dependencyStart path,
#dependencyEnd path {
    fill: var(--d-f-c) !important;
    stroke-width: 0 !important;
}
#aggregationStart path,
#aggregationEnd path {
    fill: var(--d-bc) !important;
    stroke:  var(--d-f-c) !important;
    stroke-width: 1 !important;
}

// div.mermaidTooltip {
//     position: absolute !important;
//     text-align: center !important;
//     max-width: 200px !important;
//     padding: 2px !important;
//     background: var(--d-f-c-alt) !important;
//     border: 1px solid #d0d0d0 !important;
//     border-radius: var(--v-r-s) !important;
//     pointer-events: none !important;
//     z-index: 100 !important;
// }

/* ----- gantt diagram 甘特图 ----- */

.section {
    stroke: none !important;
}

.section0 {
    fill: var(--d-f-c-alt) !important;
}

.section2 {
    fill: var(--d-f-c-alt) !important;
}

.section1,
.section3 {
    fill: var(--pn-c-alt) !important;
}

.sectionTitle0,
.sectionTitle1,
.sectionTitle2,
.sectionTitle3 {
    fill: var(--d-f-c) !important;
}

.sectionTitle {
    text-anchor: start !important;
    font-size: 0.8em !important;
    line-height: 2em !important;
}

.grid .tick {
    stroke: var(--d-f-c-alt) !important;
    shape-rendering: crispEdges !important;
}

.grid path {
    stroke-width: 0 !important;
}

.today {
    fill: none;
    stroke: var(--mm-c-red) !important;
    stroke-width: 3 !important;
}

.task {
    stroke-width: 2 !important;
}

.taskText {
    text-anchor: middle !important;
    font-size: 0.8em !important;
    line-height: 2em !important;
    font-family: var(--v-f-fm-tag) !important;
    font-weight: normal !important;
}

.taskTextOutsideRight {
    fill: var(--d-f-c) !important;
    font-family: var(--v-f-fm-tag) !important;
    font-weight: normal !important;
    text-anchor: start !important;
}

.taskTextOutsideLeft {
    fill: var(--d-f-c) !important;
    font-family: var(--v-f-fm-tag) !important;
    font-weight: normal !important;
    text-anchor: end !important;
}

/* 当前的任务 */

.active0,
.active1,
.active2,
.active3 {
    fill: var(--mm-c-blue-alt) !important;
    stroke: var(--mm-c-blue) !important;
}

.activeText0,
.activeText1,
.activeText2,
.activeText3 {
    fill: var(--mm-c-blue) !important;
}

/* 已完成的任务 */

.done0,
.done1,
.done2,
.done3 {
    stroke: none !important;
    fill: var(--mm-c-blue-alt) !important;
    stroke-width: 2 !important;
    stroke-dasharray: 2 !important;
}

/* 未来的任务 */

.task0,
.task1,
.task2,
.task3 {
    fill: var(--d-bc) !important;
    stroke: var(--mm-c-blue) !important;
    stroke-dasharray: 2 !important;
}

.taskText0,
.taskText1,
.taskText2,
.taskText3 {
    fill: var(--d-f-c) !important;
}

.taskTextOutside0,
.taskTextOutside2 {
    fill: var(--d-f-c) !important;
}

.taskTextOutside1,
.taskTextOutside3 {
    fill: var(--d-f-c) !important;
}

.doneText0,
.doneText1,
.doneText2,
.doneText3 {
    fill: var(--d-bc-lg) !important;
}

/* 当前关键路径的任务 */

.activeCrit0,
.activeCrit1,
.activeCrit2,
.activeCrit3 {
    stroke: var(--mm-c-red) !important;
    fill: var(--mm-c-red-alt) !important;
    stroke-width: 2 !important;
}

.activeCritText0,
.activeCritText1,
.activeCritText2,
.activeCritText3 {
    fill: var(--mm-c-red) !important;
}

/* 已完成的关键路径任务 */

.doneCrit0,
.doneCrit1,
.doneCrit2,
.doneCrit3 {
    stroke: none !important;
    fill: var(--mm-c-red-alt) !important;
    stroke-width: 2 !important;
    cursor: pointer !important;
    shape-rendering: crispEdges !important;
}

/* 未来的关键路径任务 */

.crit0,
.crit1,
.crit2,
.crit3 {
    stroke: var(--mm-c-red) !important;
    fill: var(--d-bc) !important;
    stroke-width: 2 !important;
    stroke-dasharray: 2 !important;
}

.critText0,
.critText1,
.critText2,
.critText3 {
    fill: var(--d-f-c) !important;
}

.doneCritText0,
.doneCritText1,
.doneCritText2,
.doneCritText3 {
    fill: var(--d-f-c) !important;
}

/* 标题 */
.titleText {
    text-anchor: middle !important;
    font-size: 1.5em !important;
    line-height: 2em !important;
    font-family: var(--v-f-fm-tag) !important;
    font-weight: var(--v-f-w-title) !important;
    fill: var(--d-f-c) !important;
}


/* ----- entity 实体关系图 ----- */

.entityBox {
    fill: var(--mm-c-pink-alt) !important;
    stroke: var(--mm-c-pink) !important;
}

/**************************************
* VLOOK 针对 Mermaid 增加
**************************************/
.v-mermaid-restyler {
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: -9px !important;
}
